<template>
    <!--遮罩-->
    <div class="landing-page-shade" v-if="show" :style="landingPageShade">
        <div class="landing-page-img">
            <img src="../../images/landing-x.png" alt="圈圈" class="circle" :style="circle">
            <img src="../../images/landing-diantong.png" alt="手电筒" class="electricTorch" :style="electricTorch">
            <img src="../../images/landing-close.png" alt="关闭" class="closeBtn" @click="close" :style="closeBtn">
            <img v-lazy="textImg" alt="提示" class="prompt" :style="prompt">
            <img src="../../images/landing-next.png" alt="下一个" class="next" @click="nextBtn(show)" :style="next">
        </div>
    </div>
    <!--遮罩end-->
</template>

<script>
    export default {
        data: () => ({
            show: 0,//显示序号
            textImg: require('../../images/landing-text-1.png'),//提示文字图片
            landingPageShade: "",//照亮圆圈位置
            circle: "",//虚线圈圈位置
            electricTorch: "",//手电筒位置
            closeBtn: "",//关闭按钮位置
            prompt: "",//提示文字信息位置
            next: "", //下一步位置
        }),
        props: {
            //显示序号，1-6为“首页”引导，7-13为“我的”引导，0为闭值
            num: {
                type: Number,
                default: 1
            },
            //最大页面序号
            max:{
                type:Number,
                default:12
            }
        },
        watch: {
            num(value){
                this.show = value;
            },
            show(value) {
                if(value > this.max){
                    value = 0;
                }
                //根据值进行样式调整
                switch (value) {
                    //扫一扫引导
                    case 1:
                        this.textImg = require('../../images/landing-text-1.png');
                        this.landingPageShade = "background: radial-gradient(10rem at 12.5% 6rem, transparent 25%, #000 0%);";
                        this.circle = "transform: rotate(-45deg);";
                        this.electricTorch = "transform: rotate(-55deg);top:10rem;left:24%";
                        this.closeBtn = "left:35%;";
                        this.prompt = "left:12%";
                        this.next = "left:12%";
                        break;
                    //账户码引导
                    case 2:
                        this.textImg = require('../../images/landing-text-2.png');
                        this.landingPageShade = "background: radial-gradient(10rem at 37.5% 6rem, transparent 25%, #000 0%);";
                        this.circle = "transform: rotate(0deg);top:2.5rem;left:24%;";
                        this.electricTorch = "transform: rotate(0deg);top:10.5rem;left:27%";
                        this.closeBtn = "left:60%;";
                        this.prompt = "left:26%";
                        this.next = "left:26%";
                        break;
                    //商券引导
                    case 3:
                        this.textImg = require('../../images/landing-text-3.png');
                        this.landingPageShade = "background: radial-gradient(10rem at 62.5% 6rem, transparent 25%, #000 0%);";
                        this.circle = "transform: rotate(-25deg);top:2.5rem;left:50%;";
                        this.electricTorch = "transform: rotate(-35deg);top:10.8rem;left:66%";
                        this.closeBtn = "left:80%;";
                        this.prompt = "left:47%";
                        this.next = "left:47%";
                        break;
                    //消息引导
                    case 4:
                        this.textImg = require('../../images/landing-text-4.png');
                        this.landingPageShade = "background: radial-gradient(10rem at 87% 6rem, transparent 25%, #000 0%);";
                        this.circle = "transform: rotate(35deg);top:2.5rem;left:72%;";
                        this.electricTorch = "transform: rotate(25deg);top:9.5rem;left:62%";
                        this.closeBtn = "left:60%;";
                        this.prompt = "left:47%";
                        this.next = "left:47%";
                        break;
                    //公示引导
                    case 5:
                        this.textImg = require('../../images/landing-text-5.png');
                        this.landingPageShade = "background: radial-gradient(10rem at 37.5% 96%, transparent 25%, #000 0%);";
                        this.circle = "transform: rotate(180deg);top:85%;left:24%;";
                        this.electricTorch = "transform: rotate(180deg);top:74%;left:39%";
                        this.closeBtn = "top:19rem;left:65%;";
                        this.prompt = "top:19rem;left:20%";
                        this.next = "top:26rem;left:20%";
                        break;
                    //发现引导
                    case 6:
                        this.textImg = require('../../images/landing-text-6.png');
                        this.landingPageShade = "background: radial-gradient(10rem at 62.5% 96%, transparent 25%, #000 0%);";
                        this.circle = "transform: rotate(135deg);top:85%;left:47%;";
                        this.electricTorch = "transform: rotate(135deg);top:76%;left:42%";
                        this.closeBtn = "top:19rem;left:65%;";
                        this.prompt = "top:19rem;left:20%";
                        this.next = "top:26rem;left:20%";
                        break;
                    //我的引导
                    case 7:
                        this.textImg = require('../../images/landing-text-7.png');
                        this.landingPageShade = "background: radial-gradient(10rem at 87% 96%, transparent 25%, #000 0%);";
                        this.circle = "transform: rotate(155deg);top:85%;left:72%;";
                        this.electricTorch = "transform: rotate(145deg);top:75%;left:74%";
                        this.closeBtn = "top:19rem;left:88%;";
                        this.prompt = "top:19rem;left:47%";
                        this.next = "top:26rem;left:47%";
                        break;
                    //成长值引导
                    case 8:
                        this.textImg = require('../../images/landing-text-8.png');
                        this.landingPageShade = "background: radial-gradient(10rem at 82% 3rem, transparent 25%, #000 0%);";
                        this.circle = "transform: rotate(35deg);top:0rem;left:66%;";
                        this.electricTorch = "transform: rotate(25deg);top:7rem;left:57%";
                        this.closeBtn = "top:3.2rem;left:50%;";
                        this.prompt = "top:13rem;left:47%";
                        this.next = "top:19rem;left:47%";
                        break;
                    //芸券引导
                    case 9:
                        this.textImg = require('../../images/landing-text-9.png');
                        this.landingPageShade = "background: radial-gradient(10rem at 50% 8.4rem, transparent 25%, #000 0%);";
                        this.circle = "transform: rotate(0deg);top:5.2rem;left:36%;";
                        this.electricTorch = "transform: rotate(0deg);top:13.5rem;left:40%";
                        this.closeBtn = "top:8rem;left:70%;";
                        this.prompt = "top:19rem;left:26%";
                        this.next = "top:26rem;left:26%";
                        break;
                    //评论引导
                    case 10:
                        this.textImg = require('../../images/landing-text-10.png');
                        this.landingPageShade = "background: radial-gradient(10rem at 84% 8.4rem, transparent 25%, #000 0%);";
                        this.circle = "transform: rotate(0deg);top:5.2rem;left:70%;";
                        this.electricTorch = "transform: rotate(0deg);top:13.5rem;left:74%";
                        this.closeBtn = "top:8rem;left:54%;";
                        this.prompt = "top:19rem;left:50%";
                        this.next = "top:26rem;left:50%";
                        break;
                    //公示引导
                    case 11:
                        this.textImg = require('../../images/landing-text-11.png');
                        this.landingPageShade = "background: radial-gradient(10rem at 10% 31.7rem, transparent 25%, #000 0%);";
                        this.circle = "transform: rotate(180deg);top:27rem;left:-4%;";
                        this.electricTorch = "transform: rotate(180deg);top:23rem;left:11%";
                        this.closeBtn = "top:13rem;left:55%;";
                        this.prompt = "top:10rem;left:5%";
                        this.next = "top:17rem;left:5%";
                        break;
                    //礼包引导
                    case 12:
                        this.textImg = require('../../images/landing-text-12.png');
                        this.landingPageShade = "background: radial-gradient(10rem at 89% 82%, transparent 25%, #000 0%);";
                        this.circle = "transform: rotate(155deg);top:70%;left:75%;";
                        this.electricTorch = "transform: rotate(145deg);top:58%;left:77%";
                        this.closeBtn = "top:10rem;left:41%;";
                        this.prompt = "top:10rem;left:56%";
                        this.next = "top:17rem;left:56%";
                        break;

          default:
            this.show = 0;
            window.isScroll = false;
        }
      }
    },
    methods: {
      //下一步按钮
      nextBtn(show) {
        this.show = show + 1;
        //判断首页1-7执行完取消引导页
        if (this.show >= 8 && this.num === 1) {
          this.show = 0;
          window.isScroll = false;
        }
      },
      close() {
        this.show = 0; //0为闭值
        window.isScroll = false;
      }
    },
    mounted() {
      this.show = this.num;
    }
  }
</script>

<style lang="scss" scoped>
  .landing-page-shade {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    justify-content: center;
    align-items: center;
    z-index: 998;
    opacity: 0.8;
    background: radial-gradient(10rem at 12.5% 6rem, transparent 25%, #000 0%);
  }

  .landing-page-img {
    img.circle {
      width: 7rem;
      background-size: 100%;
      transform: rotate(-45deg); /*更改角度*/
      position: absolute;
      top: 2.5rem;
    }
    img.electricTorch {
      width: 2.5rem;
      background-size: 100%;
      transform: rotate(-55deg); /*更改角度*/
      position: absolute;
      top: 10rem;
      left: 24%;
    }
    img.closeBtn {
      width: 2.4rem;
      background-size: 100%;
      position: absolute;
      top: 1.5rem;
      left: 35%;
    }
    img.prompt {
      width: 10rem;
      background-size: 100%;
      position: absolute;
      top: 16rem;
      left: 12%;
    }
    img.next {
      width: 10rem;
      background-size: 100%;
      position: absolute;
      top: 22rem;
      left: 12%;
    }
  }
</style>
